<template>
	<view>
		<my-field :label="data.label">
			<view @click="selectEvent">
				<u-input
					v-model="displayValue"
					suffixIcon="arrow-right"
					:placeholder="data.config.placeholder"
					readonly
				  ></u-input>
			</view>
		</my-field>
		<select-popup
		    v-model="showPopup"
		    :options="data.config.isRemote? remoteData:data.selections"
			:valueKey="valueKey"
			:labelKey="labelKey"
		    :result="obj.value"
		    :multiple="data.multiple"
		    @confirm="(val, label)=>{
				this.obj.value = val
			}">
		</select-popup>
	</view>
</template>
<script>
import RemoteMixin from '../js/remote-mixin'	
import MyField from '@/pages_form/components/my-field.vue'
import SelectPopup from '@/pages_form/components/select-popup.vue'
export default {
	mixins: [ RemoteMixin ],
	components: {MyField,SelectPopup},
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    computed:{
        displayValue() {
			const v = this
            let val = '', vals = [];
            if ('string' == typeof v.obj.value || 'number' == typeof v.obj.value) {
                vals = [v.obj.value];
            } else {
                vals = v.obj.value;
            }
            for (const option of v.data.config.isRemote? v.remoteData:v.data.selections) {
                let value = option[v.valueKey];
                let label = option[v.labelKey];
                if (vals.includes(value)) {
                    val = val?label+',':label;
                }
            }
            return val;
        }
    },
    data(){
		const v = this
        return {
			value: [],
            showPopup: false,
            optionList: [],
			obj: JSON.parse(JSON.stringify(v.data)),
            labelKey: v.data.config.isRemote? v.data.config.remoteDataProps.label:'label',
            valueKey: v.data.config.isRemote? v.data.config.remoteDataProps.value:'value',
        }
    },
	watch:{
	   obj: {
		   deep: true,
		   handler() {
			   this.$emit('fieldValueChange', this.obj)
		   }
	   }
	},
    methods:{
        selectEvent(){
            this.showPopup = !this.showPopup  && !this.data.readonly;
            this.optionList = this.data.selections;
        },
    }
}
</script>